<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/layer/layer.js"></script>
    <link rel="stylesheet" href="./css/base.css" />
    <style>
      form {
        margin-top: 10px;
        width: 380px;
        height: 280px;
        border: 1px solid #ccc;
        text-align: center;
        padding: 10px;
      }
      form p {
        margin-top: 20px;
      }
      img {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <img
      src="./images/log1.png"
      alt=""
      style="float: left; margin-top: 20px; margin-left: 300px; width: 400px"
    />
    <div style="float: left; margin: 100px 20px">
      <span>会员登录</span
      ><span style="color: #ccc; font-size: 12px">Login</span>
      <form>
        <p>用户名: <input name="username" /></p>
        <p>密&nbsp;&nbsp;&nbsp;码: <input name="password" type="password" /></p>
        <p>
          验证码: <input type="text" style="width: 50px" />
          <span
            style="
              line-height: 20px;
              display: inline-block;
              width: 50px;
              height: 20px;
              background-color: #ccc;
            "
            >8306</span
          >
          <a href="" style="color: #ccc; text-decoration: none; font-size: 12px"
            >换个图片</a
          >
        </p>
        <p>
          <button
            style="
              background-color: orange;
              color: white;
              border: none;
              width: 80px;
              height: 30px;
              margin-left: 30px;
            "
          >
            登录
          </button>
          <a
            href="javascript:void(0)"
            style="color: #ccc; font-size: 12px; text-decoration: none"
            >忘记密码?</a
          >
        </p>
        <p style="margin-top: 50px">
          <span style="font-size: 12px">你还不是名鞋库会员?</span>
          <a href="./register" style="color: red; font-size: 12px"
            >马上注册为会员</a
          >
        </p>
      </form>
      <img src="./images/log2.png" alt="" style="width: 400px" />
    </div>
    <img
      src="./images/log3.png"
      alt=""
      style="position: absolute; left: 300px; top: 520px; width: 800px"
    />
    <script>
      $(function () {
        let index = 0;
        $("form").on("submit", function () {
          try {
            $.ajax({
              url: "/api/login",
              type: "post",
              data: $("form").serialize(),
              beforeSend() {
                index = layer.msg("登录中...");
              },
            }).then(function (res) {
              layer.close(index);
              let { code, msg, token, data } = res;
              layer.msg(msg);
              if (code == 1) {
                localStorage.setItem("token", token);
                localStorage.setItem("userinfo", JSON.stringify(data));
                setTimeout(() => {
                  location = "/main";
                }, 500);
              }
            });
          } catch (error) {
            console.log(error);
          }
          return false;
        });
      });
    </script>
  </body>
</html>
